/*
 * @Author: your name
 * @Date: 2021-04-22 07:11:16
 * @LastEditTime: 2021-04-22 07:19:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \offer20k\项目代码\fantasticit\src\pages\search.tsx
 */
import React, { useState } from "react"
import styles from "./search.less"
import useStore from '@/context/useStore'
import { CloseOutlined } from '@ant-design/icons';
import { SearchOutlined } from '@ant-design/icons';
import { useHistory } from "umi";
import { useEffect } from "react";

const Search: React.FC = () => {
    let { Home, tag } = useStore()
    const [value, setvalue] = useState("")
    const history = useHistory()
    const godetail = (id: string) => {
        // history.push('/article/detail'+id)
        history.push(`/article/detail/${id}`, id)
        Home.setfalg()
    }
    useEffect(() => {
        //  获取文章标签
        tag.getTagList();
    }, [])
    const getArtTag = (value: string, count: number) => {
        history.push(`/article/tagdetail/${value}`, { value, count })
        Home.setfalg()

    }
    function inp(e: any) {
        if (e.nativeEvent.keyCode == 13 && e.target.value !== "") {
            Home.getfilter(e.target.value)
            setTimeout(() => {
                setvalue(e.target.value)

            }, 100)
        }
    }

    return (
        <div className={styles.searchs}>
            <div className={styles.inp}>
                <input type="text" onKeyPress={inp} placeholder="输入文字，搜索文章" />
                <SearchOutlined style={{ fontSize: "20px", color: "#ccc" }} />
            </div>
            <div className={styles.articletags}>
                <ul>
                    {
                        tag.tagList.map((item: any) => {
                            return <li key={item.id} onClick={() => { getArtTag(item.value, item.articleCount) }}>
                                <span>{item.label} [{item.articleCount}]</span>
                            </li>
                        })
                    }
                </ul>


            </div>
            <div key={value} className={styles.listbox} >
                {
                    Home.searchlist.map((item, index) => {
                        return <p className={styles.list} key={index} onClick={() => { godetail(item.id) }}>{item.title}</p>
                    })
                }
            </div>
            <h1 onClick={() => Home.setfalg()}><CloseOutlined style={{ fontSize: "24px" }} /></h1>
        </div>
    )
}
export default Search;
